import {ref} from 'vue'
import {data} from './AQI.js'
export const lineOption = ref({
	title: {
		text: 'AQI趋势图',
		left: '1%',
        backgroundColor:'#0F1B2E',
        padding:[10,10,5,10],
        textStyle: {
            color: '#0CBD1C',
        }
	},
	tooltip: {
		trigger: 'axis',
	},
	grid: {
		left: '5%',
		right: '25%',
		bottom: '10%',
	},
	xAxis: {
		data: data.map(function (item) {
			return item[0];
		}),
	},
	yAxis: {},
	toolbox: {
		right: 10,
		feature: {
			dataZoom: {
				yAxisIndex: 'none',
			},
			restore: {},
		},
	},
	dataZoom: [
		{
			startValue: '2015-02-14',
		},
		{
			type: 'inside',
		},
	],
	visualMap: {
		top: 50,
		right: 10,
		pieces: [
			{
				gt: 0,
				lte: 50,
				color: '#93CE07',
			},
			{
				gt: 50,
				lte: 100,
				color: '#FBDB0F',
			},
			{
				gt: 100,
				lte: 150,
				color: '#FC7D02',
			},
			{
				gt: 150,
				lte: 200,
				color: '#FD0100',
			},
			{
				gt: 200,
				lte: 300,
				color: '#AA069F',
			},
			{
				gt: 300,
				color: '#AC3B2A',
			},
		],
		outOfRange: {
			color: '#999',
		},
	},
	series: {
		name: 'AQI趋势图',
		type: 'line',
		data: data.map(function (item) {
			return item[1];
		}),
		markLine: {
			silent: true,
			lineStyle: {
				color: '#333',
			},
			data: [
				{
					yAxis: 50,
				},
				{
					yAxis: 100,
				},
				{
					yAxis: 150,
				},
				{
					yAxis: 200,
				},
				{
					yAxis: 300,
				},
			],
		},
	},
});
